<template>
	<view>
		<view class="loginbgs">
			<view class="logobg">
				<image class="logo" :src="logo" mode="widthFix"></image>
			</view>
			<image class="b3" src="../../static/b3.png" mode="widthFix"></image>
			<!-- 手机验证码登录 -->
			<view class="PhoneBox">
				<view class="tel_tile">登录</view>
				<view class="telInputBox matop20"><input class="telipt" maxlength="40" type="text" :value="inputValue2"
						placeholder="净水器编号" @input="onPwdInput" /></view>
				<view class="telInputBox matop20">
					<view class="add86">+86</view>
					<input class="telipt" maxlength="11" type="number" :value="inputValue0" placeholder="请输入手机号码 "
						@input="onPhoneInput" />
				</view>
				<view class="telInputBox matop20">
					<input class="telipt2" maxlength="6" type="number" :value="invite_code" placeholder="请输入验证码 "
						@input="onCodeInput" />
					<view class="addyzm" :class="!showCode?'yzm0':'yzm1'" @click="API_jiqima()">
						{{!showCode?'获取验证码':cuttTime+'s'}}
					</view>
				</view>

			</view>
			<view class="anniu matop50 tcent linh100" @click="GET_openid()">登录</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mobile: '',
				cuttTime: 60,
				openId: '',
				token_id: '',
				showCode: false,
				inputValue0: '',
				inputValue2: '',
				invite_code: '',
				openid: '',
				logo: '',
				jiqimas: false,
			};
		},
		onLoad(e) {
			this.openid = e.openid;
			this.API_Logo()
		},
		methods: {
			API_Logo() {
				var that = this;
				that.ran
					.request('index/Index/indexSet', {})
					.then(res => {
						if (res.code == 0) {
							that.logo = res.data.login_logo;
						}
					});
			},
			API_jiqima() {
				var that = this;
				that.ran
					.request('index/Login/verifyMachine', {
						jiqima: that.inputValue2,
						mobile: that.inputValue0,
					})
					.then(res => {
						if (res.code == 0) {
							that.getMsg()
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
							})
						}
					});
			},
			onPhoneInput: function(event) {
				this.inputValue0 = event.target.value;
			},
			onCodeInput: function(event) {
				this.invite_code = event.target.value;
			},
			onPwdInput: function(event) {
				this.inputValue2 = event.target.value;

			},
			getMsg() {
				var that = this;
				if (that.inputValue0.length != 11) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none',
					})
					return;
				}
				var currentTime = 60;
				var interval = setInterval(function() {
					currentTime--;
					that.cuttTime = currentTime;
					if (currentTime <= 0) {
						clearInterval(interval)
						that.showCode = false;
					}
				}, 1000)
				that.ran.request('index/Login/sendCode', {
					mobile: that.inputValue0,
				}).then(res => {
					console.log(res)
					if (res.code == 0) {
						uni.showToast({
							title: res.msg,
							icon: 'none',
						})
						that.showCode = true;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
						})
					}
				})
			},
			//登录
			GET_openid() {
				var that = this;
				uni.login({
					provider: 'weixin', //使用微信登录
					success: function(loginRes) {
						console.log('loginRes', loginRes.code);
						that.ran
							.request('index/Wxchat/index', {
								code: loginRes.code,
							})
							.then(res => {
								that.openid = res.data.openid;
								that.ToLogin(res.data.openid);
							});
					}
				});
			},
			ToLogin() {
				var that = this;
				that.ran
					.request('index/Login/login', {
						mobile: that.inputValue0,
						code: that.invite_code,
						purifier_code: that.inputValue2,
						openid: that.openid,
					})
					.then(res => {
						console.log(res);
						if (res.code == 0) {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});

							uni.setStorageSync('user_id', res.data.id)
							uni.showModal({
								title: '提示',
								content: '是否接收滤芯到期提醒通知?',
								success: function(res) {
									if (res.confirm) {
										uni.requestSubscribeMessage({
											tmplIds: [
												'iJP4_7gTz2fkyHFj2klVlPvym5x3a4Y_Zgpbe_G7sbw'],
											success(res) {
												uni.switchTab({
													url: '/pages/index/index'
												});
											}
										});
									} else if (res.cancel) {
										uni.switchTab({
											url: '/pages/index/index'
										});
										// that.API_reset(id);
									}
								}
							});
							// uni.requestSubscribeMessage({
							// 	tmplIds: ['iJP4_7gTz2fkyHFj2klVlPvym5x3a4Y_Zgpbe_G7sbw'],
							// 	success(res) {

							// 	}
							// })
							// setTimeout(function() {
							// 	uni.switchTab({
							// 		url: '/pages/index/index'
							// 	});
							// }, 2000)
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					});
			},
		},
	};
</script>

<style lang="scss">
	page {
		overflow-x: hidden;
		// background: url('@/static/b3.png') no-repeat #fff top;
		background-size: 750upx 80upx;
	}

	.b3 {
		width: 750rpx;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.opcts {
		opacity: 0.5;
	}

	.tcent {
		text-align: center !important;
	}

	.linh100 {
		line-height: 90upx;
	}

	.matop20 {
		margin-top: 20upx !important;
	}

	.matop50 {
		margin-top: 50upx !important;
	}

	.mabtm50 {
		margin-bottom: 50upx !important;
	}

	.matop100 {
		margin-top: 100upx !important;
	}

	.matop200 {
		margin-top: 200upx !important;
	}



	.posBox {
		position: absolute;
		bottom: 200upx;
		left: 200upx;
	}

	.logocss {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
		display: block;
	}







	.PhoneBox {
		margin: 4% auto 2%;
		padding: 20upx 50upx;
		overflow: hidden;

		.tel_tile {
			font-weight: bold;
			line-height: 90upx;
			font-size: 40upx;
		}


		.telInputBox {
			width: 650upx;
			overflow: hidden;
			background: #efefef;
			border-radius: 80upx;

			.add86 {
				width: 100upx;
				line-height: 80upx;
				float: left;
				text-align: center;
				box-sizing: border-box;
				border-right: 1upx solid #eee;
			}

			.addyzm {
				width: 210upx;
				line-height: 80upx;
				float: right;
				text-align: center;
				box-sizing: border-box;

			}

			.yzm0 {
				background: #00D3F1;
				color: #fff;
			}

			.yzm1 {
				background: #e8e1e1;
				color: #333;
			}

			.telipt2 {
				width: 350upx;
				padding: 0 20upx;
				line-height: 80upx;
				height: 80upx;
				float: left;
			}

			.telipt {
				width: 460upx;
				padding: 0 20upx;
				line-height: 80upx;
				height: 80upx;
				float: left;
			}
		}

	}

	.loginbgs {
		width: 100%;
		margin: 0% 0 2%;

		.logo_slg {
			width: 200upx;
			margin: auto;
			text-align: center;
			line-height: 100upx;
			font-size: 34upx;
		}

		.logobg {
			background: #00D3F1;
			padding: 80rpx 0;
		}

		.logo {
			width: 140rpx;
			margin: 0 auto;
			display: block;
			border-radius: 140rpx;
			box-sizing: border-box;
			// box-shadow: 1px 2px 4px #999;
		}
	}

	.anniu:active {
		background: linear-gradient(90deg, #00D3F1, #00b7cf);
	}

	.anniu {
		width: 650rpx;
		height: 90rpx;
		margin: 0 auto;
		border-radius: 60rpx;
		color: #ffffff;
		background: linear-gradient(90deg, #00D3F1, #00b7cf);

		image {
			width: 50rpx;
			height: 50rpx;
			margin-right: 16rpx;
		}

		view {
			font-size: 34upx;
		}
	}



	.login {
		width: 500rpx;
		height: 90rpx;
		background: #29c88e;
		border-radius: 45rpx;
		margin: 80rpx auto 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #ffffff;
	}

	.item {
		margin: 0 95rpx;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #dbdbdb;
	}

	.item-l {
		display: flex;
		align-items: center;
		margin-right: 30rpx;
	}
</style>